{extend name="/public/base" /}

{block name="content"}

<!-- 横栏 start -->
<section class="breadcrumb-section set-bg" data-setbg="/static/shop/img/breadcrumb.jpg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="breadcrumb__text">
                    <h2>有机 商品</h2>
                    <div class="breadcrumb__option">
                        <a href="/shop/index">首页</a><span>商品</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 横栏 End -->

<!-- 内容 start -->
<section class="product spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-5">
                <div class="sidebar">
                    <div class="sidebar__item">
                        <h4>全部分类</h4>
                        <ul>
                            {for start="1" end="11"}
                            <li><a href="JavaScript:;">测试{$i}</a></li>
                            {/for}
                        </ul>
                    </div>
<!--                    <div class="sidebar__item">-->
<!--                        <h4>价格</h4>-->
<!--                        <div class="price-range-wrap">-->
<!--                            <div class="price-range ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"-->
<!--                                 data-min="10" data-max="540">-->
<!--                                <div class="ui-slider-range ui-corner-all ui-widget-header"></div>-->
<!--                                <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>-->
<!--                                <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>-->
<!--                            </div>-->
<!--                            <div class="range-slider" style="left: 20%">-->
<!--                                <div class="price-input">-->
<!--                                    <input type="text" id="minamount" style="max-width: 30%">-->
<!--                                    <input type="text" id="maxamount" style="max-width: 30%">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="sidebar__item">
                        <div class="latest-product__text">
                            <h4>最新上架</h4>
                            <div class="latest-product__slider owl-carousel">
                                {for start="1" end="3"}
                                <div class="latest-prdouct__slider__item">
                                    {for start="1" end="4"}
                                    <a href="#" class="latest-product__item">
                                        <div class="latest-product__item__pic">
                                            <img src="/static/shop/img/latest-product/lp-{$i}.jpg" alt="">
                                        </div>
                                        <div class="latest-product__item__text">
                                            <h6>商品{$i}</h6>
                                            <span>￥30.00</span>
                                        </div>
                                    </a>
                                    {/for}
                                </div>
                                {/for}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-7">
                <!-- 限时折扣 start -->
                <div class="product__discount">
                    <div class="section-title product__discount__title">
                        <h2>限时折扣</h2>
                    </div>
                    <div class="row">
                        <div class="product__discount__slider owl-carousel">

                            {for start="1" end="7"}
                            <!-- 商品 start -->
                            <div class="col-lg-4">
                                <div class="product__discount__item">
                                    <div class="product__discount__item__pic set-bg"
                                         data-setbg="/static/shop/img/product/discount/pd-{$i}.jpg">
                                        <div class="product__discount__percent">-20%</div>
                                        <ul class="product__item__pic__hover">
                                            <li><a href="javascript:;"><i class="iconfont icon-aixin_shixin"></i></a></li>
                                            <li><a href="javascript:;"><i class="iconfont icon-fenxiang1"></i></a></li>
                                            <li><a href="javascript:;"><i class="iconfont icon-gouwucheman"></i></a></li>
                                        </ul>
                                    </div>
                                    <div class="product__discount__item__text">
                                        <span>限时折扣{$i}</span>
                                        <h5><a href="#">立即购买</a></h5>
                                        <div class="product__item__price">￥30.00 <span>￥36.00</span></div>
                                    </div>
                                </div>
                            </div>
                            <!-- 商品 end -->
                            {/for}

                        </div>
                    </div>
                </div>
                <!-- 限时折扣 end -->

                <div class="filter__item">
                    <div class="row">
                        <div class="col-lg-4 col-md-5">
                            <div class="filter__sort">
                                <span>排序方式</span>
                                <select>
                                    <option value="0">销量</option>
                                    <option value="0">价格</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <div class="filter__found">
                                <h6><span>16</span> 全部商品</h6>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-3">
                            <div class="filter__option">
                                <span class="icon_grid-2x2"></span>
                                <!--                                <span class="icon_ul"></span>-->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 商品列表 start -->
                <div class="row">

                    {for start="1" end="13"}
                    <!-- 商品信息 start -->
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="product__item">
                            <div class="product__item__pic set-bg"
                                 data-setbg="/static/shop/img/product/product-{$i}.jpg">
                                <ul class="product__item__pic__hover">
                                    <li><a href="#"><i class="iconfont icon-aixin_shixin"></i></a></li>
                                    <li><a href="javascript:;"><i class="iconfont icon-fenxiang1"></i></a></li>
                                    <li><a href="javascript:;"><i class="iconfont icon-gouwucheman"></i></a></li>
                                </ul>
                            </div>
                            <div class="product__item__text">
                                <h6><a href="#">商品{$i}</a></h6>
                                <h5>￥{$i}0.00</h5>
                            </div>
                        </div>
                    </div>
                    <!-- 商品信息 end -->
                    {/for}

                </div>
                <!-- 页码 start -->
                <div class="product__pagination">
                    <div style="text-align: center;">
                        <a href="#"><i class="iconfont icon-zuojiantou"></i></a>
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>
                        <a href="#"><i class="iconfont icon-youjiantou"></i></a>
                    </div>
                </div>
                <!-- 页码 end -->
            </div>
        </div>
    </div>
</section>
<!-- 内容 End -->
{/block}